


<template>
<v-touch v-on:swiperight="onSwipeRight" :swipe-options="{direction: 'horizontal'}">
<div style="position:relative;width: 100%;height:100%; ">
   <img src="../assets/img/voteback3.png" class="backimg">

   <!-- logo -->
   <div style="position:absolute;display:block;width:90%;left:7%;top:0%">
     <div class="logo">
      <!-- <img style="position:absolute;display:block;width:12%;left:0%;" src="../assets/img/logo_1.png">
      <img style="position:absolute;display:block;width:28%;left:16%;" src="../assets/img/logo_2.png"> -->
      <img style="position:absolute;display:block;width:4%;right:0%" src="../assets/img/guanbi.png" @click="backhome">
    </div>
   </div>
   

   <!-- votecontent -->
   <div style="position:absolute;display:block;width:90%;height:79%;left:5%;top:21%;">

     <div class=" flex-column2" style=" width: 100%; height:100%;">

         <!-- 访问数据显示 -->
         <div class="showInfo">
           <img src="../assets/img/bottom.png" style="width:100%;height:auto;">
      
            <div slot="content"   class="card-demo-flex card-demo-content01">
              <div class="title">
                  <div class="top-message"> 
                    <img src="../assets/img/baoming.png" style="height:80%">
                    <div>已报名</div><br />
                  </div>
                  <div style="height: 45%;width: 100%;" class="flex-row"> 
                    <span>{{countVote}}</span>
                  </div>
              </div>
              <div class="title">
                  <div class="top-message"> 
                    <img src="../assets/img/statistic.png" style="height:80%">
                    <div>累计投票</div><br />
                  </div>
                  <div style="height: 40%;width: 100%;" class="flex-row">
                    <span>{{2*countVote}}</span>
                  </div>
              </div>
              <div style="position:relative; display:flex;flex-direction:column;justify-content:center;align-items:center;top:3%;">
                  <div class="top-message"> 
                    <img src="../assets/img/kanguo.png" style="height:80%">
                    <div>访问量</div><br />
                  </div>
                  <div style="height: 45%;width: 100%;" class="flex-row">
                    <span>{{accessNum}}</span>
                    </div>
              </div>
            </div>
         </div>

        <!-- 倒计时显示 -->
         <div class="time-section flex-row2">
              <div style="width:90%;height:100%;" class="flex-row2 ">
              <span style="color: white">活动倒计时</span>
                            <div style="width:6%;height:auto;background: white;border-radius:5px" class="flex-row2 ">
                  {{timeDay}}
              </div>
              <span style="color: white">天</span>
              <div style="width:6%;height:auto;background: white;border-radius:5px" class="flex-row2 ">
                  <div>{{timeHourH}}</div>
              </div>
              <div style="width:6%;height:auto;background: white;border-radius:5px" class="flex-row2 ">
                  <div>{{timeHourL}}</div>
              </div>
              :
              <div style="width:6%;height:auto;background: white;border-radius:5px" class="flex-row2 ">
                 <div> {{timeMinuteH}}</div>
              </div>
              <div style="width:6%;height:auto;background: white;border-radius:5px" class="flex-row2 ">
                  <div>{{timeMinuteL}}</div>
              </div>
              :
              <div style="width:6%;height:auto;background: white;border-radius:5px" class="flex-row2 ">
                  <div>{{timeSecondH}}</div>
              </div>
              <div style="width:6%;height:auto;background: white;border-radius:5px" class="flex-row2 ">
                 <div> {{timeSecondL}}</div>
              </div>
              </div>
         </div>

         <!-- info 1-->
         <div style="width: 60%;height:3%; " class="flex-row2 ">
           <img src="../assets/img/appstyle.png" style="width:100%;height:100%">
         </div>

         <!-- 选择移动端风格 -->
         <div style="width:100%;height:24%;" class="flex-row2 ">
           <div  style="width:48%;height:100%;background: white;border-radius:5px" class="flex-column2 ">

             <div  class="checkimg"  @click="voteApp(1)">
               <div class="flex-row" style="width:18px;height:18px;border:1px solid rgba(164, 166, 169,1);border-radius:50%;z-index:2">
                 <img v-show="appFlag&&initialAppFlag" src="../assets/img/check-circle-fill@2x.png" style="width:110%;height:110%">
               </div>
             </div >

             <div class="flex-column2 " style="width: 100%;height:70%; ">
                 <img src="../assets/img/logoin1.png" style="width:auto;height:100%" @click="appview1">
             </div>

             <div class="flex-row2 " style="width:100%;height:10%;margin-bottom: 5%;">
               <div>移动端风格1</div>
               <span>{{sumMobileStyle}}票</span>
             </div>

          </div>

           <div  class="flex-column2 " style="width:48%;height:100%;background: white;border-radius:5px">

             <div class="checkimg" @click="voteApp(0)">
               <div class="flex-row"  style="width:18px;height:18px;border:1px solid rgba(164, 166, 169,1);border-radius:50%;z-index:2">
                 <img v-show="!appFlag&&initialAppFlag" src="../assets/img/check-circle-fill@2x.png" style="width:110%;height:110%">
               </div>
             </div >

             <div class="flex-column2 " style="width: 100%;height:70%; ">
                 <img src="../assets/img/logoin2.png" style="width:auto;height:100%" @click="appview2">
             </div>

             <div class="flex-row2 " style="width:100%;height:10%;margin-bottom: 5%;">
               <div>移动端风格2</div>
               <span>{{countVote-sumMobileStyle}}票</span>
             </div>
           </div>

         </div>

        <!-- info 2-->
         <div class="flex-row2 " style="width: 60%;height:2.8%; ">
           <img src="../assets/img/webstyle.png" style="width:100%;height:100%">
         </div>

        <!-- 选择Web端风格 -->
         <div class="flex-row2 " style="width:100%;height:18%;margin-bottom: 5%;">
           <div  style="display:flex;flex-direction:column;justify-content: space-around;align-items: center;width:48%;height:100%;background: white;border-radius:5px">

             <div class="checkimg" @click="voteWeb(1)">
               <div class="flex-row" style="width:18px;height:18px;border:1px solid rgba(164, 166, 169,1);border-radius:50%;z-index:2">
                 <img v-show="webFlag&&initialWebFlag" src="../assets/img/check-circle-fill@2x.png" style="width:110%;height:110%">
               </div>
             </div >

             <div class="flex-row2 " style="width: 100%;height:60%; ">
                 <img src="../assets/img/weblogin1.png" style="width:100%;height:auto" @click="webview1">
             </div>

             <div class="flex-row2 " style="width:100%;height:10%;margin-bottom: 5%;">
               <div>Web端风格1</div>
               <span>{{sumWebStyle}}票</span>
             </div>

          </div>

          <div  class="flex-column2 " style="width:48%;height:100%;background: white;border-radius:5px">

             <div class="checkimg" @click="voteWeb(0)">
               <div class="flex-row" style="width:18px;height:18px;border:1px solid rgba(164, 166, 169,1);border-radius:50%;z-index:2">
                 <img v-show="!webFlag&&initialWebFlag" src="../assets/img/check-circle-fill@2x.png" style="width:110%;height:110%">
               </div>
             </div >

             <div class="flex-row2 " style="width: 100%;height:60%; ">
                 <img src="../assets/img/weblogin2.png" style="width:100%;height:auto" @click="webview2">
             </div>

             <div class="flex-row2 " style="width:100%;height:10%;margin-bottom: 5%;">
               <div>Web端风格2</div>
               <span>{{countVote-sumWebStyle}}票</span>
             </div>
           </div>

         </div>

          <!-- 提交 -->
         <div @click="vote" class="flex-row2  submit_button">

              <span style="color: white;font-size: 16px;">提交</span>

         </div>

         <!-- 投票用户展示-->
         <!-- <div  class="flex-row2 " style="width:80%;height:20%;z-index:2;background:linear-gradient(0deg,rgb(241, 232, 225) 0%,rgb(199, 176, 103) 100%);border-radius:18px;">
           <group title="已投票用户" style="height:100%;width:100%;background:linear-gradient(0deg,rgb(241, 232, 225) 0%,rgb(199, 176, 103) 100%);border-radius:18px;">
             <x-textarea readonly style="color:blue" rows=2 placeholder="暂时没有用户投票"  v-model="userString" >
             </x-textarea>
           </group>
         </div> -->
         
         <!-- 投票用户展示2-->
         <!-- <div  class="flex-row2 " >
         <textarea name="showUser" readonly id="showUser" cols="40" rows="5"  style="color:#5a5aff;background:linear-gradient(0deg,rgb(241, 232, 225) 0%,rgb(199, 176, 103) 100%);border-radius:10px;">          
         </textarea>
         </div> -->


          <!-- 投票用户展示3-->
          <div class="showInfo2" style="width:90%;height: 15%;justify-content: flex-start;margin-top: 5%;">
            <div  class="flex-column2 user_detail"> 
              <span style="color: white;font-size: 13px;">参加人员名单</span>
            </div>
            
            <div  style="position:relative;width:100%;height:30px;right:10%;top:-45px;display:flex;flex-direction:row;justify-content: flex-end;align-items: center;">
              <img src="../assets/img/pic2.png" style="width:30px;height:30px;">
            </div>
           
            
            <div class="card-demo-flex" style="width: 84%; height: 60%;margin-top: 5%;">
                <textarea name="showUser" readonly id="showUser" cols="40" rows="5"  class="textarea1">          
                </textarea>
            </div>       
          </div>

        <Toast :value="toastValue" :is-show-mask="true" text="投票成功"></Toast>
        <Toast
        :value="toastValueErr"
        :is-show-mask="true"
        :text="errorText"
        @on-hide="saveErr"
        type="cancel"
        width="200px"
        ></Toast>

        

     </div>  
   </div>



</div>

</v-touch>
</template>

<script>
import { Divider, Toast,Radio,XTextarea ,Group} from "vux";
export default {
  name: "vote",
  // inject:['reload'],
  components: {
    Toast,
    Divider,
    Radio,
    XTextarea,
    Group
  },

  data() {
    return {
      deviceType:this.judgeDeviceType().isIOS,
      chooseApp: 1,
      chooseWeb: 1,
      appFlag: true,
      webFlag: true,
      timeDay:"0",
      timeHourL: "0",
      timeMinuteL: "0",
      timeSecondL: "0",
      timeHourH: "0",
      timeMinuteH: "0",
      timeSecondH: "0",
      countVote: 0,
      sumMobileStyle: 0,
      sumWebStyle: 0,
      accessNum:0,
      toastValueErr: false,
      toastValue: false,
      errorText:"已投票，请勿重复投票",
      userString:"",
      initialWebFlag:false,
      initialAppFlag:false,
      voteEndTime:""
    };
  },

  mounted() {
    this.getVote();
    this.getAccessNum();
    
  },

  methods: {
    // 设置倒计时
    setTime() {
      var date;
      // 判断是否为iod机型，iod机型不能使用yyyy-mm-dd格式，要用yyyy/mm-dd格式
      if(this.judgeDeviceType().isIOS){
         date = new Date(this.voteEndTime.replace(/-/g,"/")) ;
        }else{
          date = new Date(this.voteEndTime) ;
        }
      let interval = setInterval(() => {
         let date1;
         date1 =date - new Date();
        if (date1 <= 0) {
          this.timeDay="0";
          this.timeHourH = "0";
          this.timeSecondH = "0";
          this.timeMinuteH = "0";
          this.timeHourL = "0";
          this.timeSecondL = "0";
          this.timeMinuteL = "0";
          clearInterval(interval);
        } else {
          let timeMinute, timeSecond, timeHour;
          this.timeDay=parseInt(date1 / 1000 / 60 / 60/24, 10);
          this.timeHourH = parseInt(date1 / 1000 / 60 / 60%24/10, 10);
          this.timeHourL = parseInt(date1 / 1000 / 60 / 60%24%10, 10);
          // if(timeMinute<10)
          // timeMinute="0"+timeMinute;
          this.timeMinuteH = parseInt(date1 / 1000 / 60 %60/10, 10);
          this.timeMinuteL = parseInt(date1 / 1000 / 60 %60%10, 10);
          timeSecond = parseInt(date1 / 1000 % 60 , 10);
          // if(timeSecond<10)
          // timeSecond="0"+timeSecond;
          this.timeSecondH = parseInt(date1 / 1000 % 60/10 , 10);
          this.timeSecondL = parseInt(date1 / 1000 % 60%10 , 10);
        }
      }, 1000);
    },
    onSwipeRight() {
      this.$router.push("home");
    },
    backhome() {
      this.$router.push("home");
    },
    appview1(){
      this.$router.push("voteInfo1");
    },
    appview2(){
      this.$router.push("voteInfo2");
    },
    webview1(){
      this.$router.push("voteInfo3");
    },
    webview2(){
      this.$router.push("voteInfo4");
    },
    // 投票移动端
    voteApp(data) {
      this.initialAppFlag=true;
      this.chooseApp = data;
      this.appFlag = data==1?true:false;
    },
    voteWeb(data) {
      this.initialWebFlag=true;
      this.chooseWeb = data;
      this.webFlag = data==1?true:false;
    },
    // 获取访问量
    getAccessNum(){
      let paramsMD5 = '{"_method":"HOME_FIX_PERMISSION_MENU.getAccess"' + "}";
      this.$ajax({
        methods: "post",
        url: this.COMMON_URL,
        // params: this.signMD5({ FixJSON: paramsMD5 }),
        params: { FixJSON: paramsMD5 },
        async: false
      }).then(res => {
        this.accessNum = res.data.accessNum;
        this.voteEndTime=res.data.voteEndString;
        this.setTime();
      });

    },
    // 获取已投票信息
    getVote() {
      let paramsMD5 = '{"_method":"HOME_FIX_PERMISSION_MENU.getVoteInfo"' + "}";
      this.$ajax({
        methods: "post",
        url: this.COMMON_URL,
        // params: params,
        // params: this.signMD5({ FixJSON: paramsMD5 }),
        params: { FixJSON: paramsMD5 },
        async: false
      }).then(res => {
        this.userString="";
        this.countVote = res.data.countVote;
        this.sumMobileStyle = res.data.sumMobileStyle;
        this.sumWebStyle = res.data.sumWebStyle;
        let array=[];
        if(res.data.userList){
          res.data.userList.map(user=>{
            let  message=user.USERNAME+"在"+user.INPUTDATE.substring(0,19)+"已参与了投票;\n";
            this.userString+=message;
          })
        }
        document.getElementById("showUser").innerHTML=this.userString;
        
      });
    },
    // 提交投票
    vote() {
      // 判断是否已经选择，每种风格必须都选了才能提交
      if(!this.initialWebFlag||!this.initialAppFlag){
         this.errorText="请分别选择一种移动端端风格及web端风格";
         this.toastValueErr = true;
         return
      }  
      var date;
      if(this.judgeDeviceType().isIOS){
         date = new Date(this.voteEndTime.replace(/-/g,"/")) - new Date();
        }else{
          date = new Date(this.voteEndTime)- new Date() ;
        }

      if (date <= 0) {
        this.errorText="已超过截止日期，无法投票"
        this.toastValueErr = true;
      }else{
        let paramsMD5 =
        '{"_method":"HOME_FIX_PERMISSION_MENU.insertVoteUser","MOBILESTYLE":' +
        this.chooseApp +
        ',"WEBSTYLE":' +
        this.chooseWeb +
        "}";
      this.$ajax({
        methods: "post",
        url: this.COMMON_URL,
        // params: this.signMD5({ FixJSON: paramsMD5 }),
        params: { FixJSON: paramsMD5 },
        async: false
      })
        .then(res => {
          if (res.data.res == "1") {
            this.toastValue = true;
            setTimeout(()=>{
              this.$router.push("home");
            },1000)
            // this.getVote();
          } else {
            this.errorText="已投票，请勿重复投票";
            this.toastValueErr = true;
          }
        })
        .catch(error => {
          alert(error);
        });
      }
      
    },
    saveErr() {
      this.toastValueErr = false;
    }
  },

  computed: {},

  watch: {}
};
</script>

<style scoped>
.user_detail{
  position:relative;
  width: 100px;
  height:30px; 
  top: calc(5% - 15px);
  background:linear-gradient(0deg,rgba(131,192,255,1) 0%,rgba(83,164,249,1) 100%);
  border-radius:18px;
  z-index:2;
}
.submit_button{
  width:60%;
  height:4%;
  background:linear-gradient(0deg,rgba(242,153,74,1) 0%,rgba(242,201,76,1) 100%);
  border-radius:48px;
  z-index:2;
  margin-bottom: 5%;
}
.textarea1{
  font-family:PingFang SC;
  font-weight:400;
  background:rgb(199, 176, 103,0) ;
  border: 0;
  border-radius:10px;
  width: 100%;
}
.flex-row{
  display:flex;
  flex-direction:row;
  justify-content: center;
  align-items: center;
}
.flex-row2{
  display:flex;
  flex-direction:row;
  justify-content: space-around;
  align-items: center;
}
.flex-column2{
  display:flex;
  flex-direction:column;
  justify-content: space-around;
  align-items: center;
}
.checkimg{
  display:flex;
  justify-content: flex-end;
  align-items: center;
  width:90%;
  height:15%
}
.backimg{
  display:block;
  width: 100%;
  height: 100%
}
.logo{
  position:relative;
  height: 60px;
  width: 100%;
  display:flex;
  flex-direction:row;
  align-items: center;
}

.showInfo{
  position:relative;
  width: 100%;
  height:auto; 
  display:flex;
  flex-direction:column;
  align-items: center;
  z-index:1
}
.showInfo2{
  position:relative;
  width: 100%;
  height:auto; 
  display:flex;
  flex-direction:column;
  align-items: center;
  background: url('../assets/img/bottom1.png') no-repeat;
  background-size: 100% 100%;

  z-index:1
}

.card-demo-flex {
  position:absolute;
  display:flex;
  flex-direction:row;
  width:80%;
  height:70%;
  z-index:2;
  padding: 10px 0;
  padding: 15px;
}
.card-demo-content01 {
  padding: 10px 0;
}
.card-padding {
  padding: 15px;
}
.title{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content: center;
  align-items: center;
  top:3%;
  /* border-right: 1px solid #ffff7b; */
}
.top-message{
  height: 35%;
  width: 100%;
  display:flex;
  flex-direction:row;
  justify-content: center;
  align-items: center;
  margin-top: 10%;
}
.time-section{
  width:92%;
  height:4%;
  background:linear-gradient(0deg,rgba(242,153,74,1) 0%,rgba(242,201,76,1) 100%);
  border-radius:48px;
  z-index:2;
  margin-bottom: 5%;
}
.card-demo-flex > div {
  flex: 1;
  text-align: center;
  font-size: 12px;
}
div{
  text-align: center;
  font-size: 12px;
}
span{
  color: #f1ab14;
  font-size: 12px;
}

</style>

